<template>
  <div class="java">
    <div class="img"></div>
    <div class="java_warp">
      <div class="java_one">
        <div class="java_one_king">
          <span>
            为什么说 JAVA 是
            <b>编程界的“ 王者 ”</b>
            ?
          </span>
        </div>
        <div class="java_one_value">
          拥有21年历史的java语言，实用性、性能、兼容性都彰显其价值所在
        </div>
        <ul class="java_one_image">
          <li>
            <img src="./img/tu1.png" alt="" />
          </li>
          <li>
            <img src="./img/tu2.png" alt="" />
          </li>
          <li>
            <img src="./img/tu3.png" alt="" />
          </li>
          <li>
            <img src="./img/tu4.png" alt="" />
          </li>
        </ul>
      </div>
      <div class="java_use">
        <h2>
          <span>JA</span>
          <b>VA</b>
          应用领域
        </h2>
        <h4>不同学习阶段，大型项目贯穿，让你拥有两年工作经验</h4>
        <div class="java_use_con">
          <img src="./img/tu5.jpg" alt="" />
        </div>
      </div>
      <div class="java_newtec">
        <div class="newtec_tital">
          <h2>新技术成就高前途</h2>
          <h4>多一份技术等于多一分薪资</h4>
        </div>
        <div class="newtec_con">
          <div class="items">
            <img src="./img/D1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/R1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/M1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/S1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/L1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/S2.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/G1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/E1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/F1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/Z1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/A1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
          <div class="items">
            <img src="./img/C1.png" alt="" />
            <p>
              <span>课程详情</span>
            </p>
          </div>
        </div>
      </div>
      <div class="java_field">
        <div class="field_tital">
          <h2>
            <span>四大</span>
            就业领域
          </h2>
          <h4>让你就业无忧才是真道理</h4>
        </div>
        <div class="field_con">
          <div class="field_con_img">
            <img src="./img/zu1.png" alt="" />
          </div>
          <div class="field_con_img">
            <img src="./img/zu2.png" alt="" />
          </div>
          <div class="field_con_img">
            <img src="./img/zu3.png" alt="" />
          </div>
          <div class="field_con_img">
            <img src="./img/zu4.png" alt="" />
          </div>
        </div>
      </div>
      <div class="java_data">
        <div class="java_data_tatal">
          <h2>
            <span>JA</span>
            <b>VA</b>
            数据分析
          </h2>
          <h4>数据来源于互联网最新统计，真实可靠</h4>
        </div>
        <div class="java_data_con">
          <img
            src="./img/yuan1.png"
            alt=""
            style="width: 684px; height: 384px"
          />
          <img
            src="./img/yuan2.png"
            alt=""
            style="width: 458px; height: 358px"
          />
        </div>
        <div class="java_data_bom">
          <span>
            JAVA工程师平均薪资（
            <b>21300</b>
            ）分析图
          </span>
          <span>
            JAVA工程师平均日需求（
            <b>2000</b>
            ）分析图
          </span>
        </div>
      </div>
      <div class="java_teacher">
        <div class="java_teacher_tital">
          <h2>
            <span>求学</span>
            <b>之路</b>
            必有良师相伴
          </h2>
          <h4>
            20多位来自一线的专业讲师，平均从业经验10年以上，具有丰富的行业知识和管理经验
          </h4>
        </div>
        <Teacher></Teacher>
        <!-- <div class="contanier">
          <ul class="title">
            <li
              v-for="item in teacherTital"
              :key="item.id"
              @click="activeIndex = item.id"
              :class="{ active: activeIndex == item.id }"
            >
              {{ item.navs }}
              <div
                @click="activeIndex = item.id"
                :class="{ line: activeIndex == item.id }"
              >
                <b></b>
              </div>
            </li>
          </ul>
          <div style="height: 36px"></div>
          <div class="con_wrap">
            <div class="con">
              <swiper class="swiper" :options="swiperOption">
                <swiper-slide v-for="item in showList" :key="item.id">
                  <img :src="imger + item.image" alt="" />
                  <div class="jianjie">
                    <div class="top">
                      <div class="top_t">
                        <span class="name">{{ item.name }}</span>
                        <span class="age">{{ item.year }}工作经验</span>
                      </div>
                      <div class="top_b">
                        <span>高级讲师</span>
                      </div>
                    </div>
                    <p>{{ item.introduce }}</p>
                  </div>
                </swiper-slide>
              </swiper>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import axios from "axios";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// import 'swiper/css/swiper.css'
import { Navigation } from "swiper";
import Teacher from "@/components/teacher/teacher.vue"
import Footer from "@/components/footer/Footer.vue"

export default {
  name: "swiper-example-multiple-slides-per-biew",
  title: "Multiple slides per view",
  components: {
    Swiper,
    SwiperSlide,
    Teacher,
    Footer

  },
  data() {
    return {
      teacherTital: [],
      activeIndex: 7,
      tearr: [],
      imger: "https://itdahua.com",

      swiperOption: {
        // slidesPerView: 4,
        spaceBetween: 10,
        slidesPerGroup: 1,
        slidesPerView: "auto",
        mousewheel: {
          releaseOnEdges: true,
        },

        observer: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        modules: [Navigation],
      },
    };
  },
  async created() {
    console.log("123");
    let res = await axios.get("api/curricala/list");
    this.teacherTital = res.data.data;
    console.log("456", res.data.data);
    let arr = await axios.get("api/teacher/list");
    this.tearr = arr.data.data;
    console.log("789", this.tearr);
  },
  computed: {
    showList() {
      let aee = [];
      aee = this.tearr.filter((item) => item.cid == this.activeIndex);
      return aee;
    },
  },
};
</script>
<style lang="scss" scoped>
.java {
  width: 100%;
  min-width: 1200px;
}
.img {
  cursor: pointer;
  width: 100%;
  height: 650px;
  min-width: 1200px;
  background: url(./img/img.jpg) 50% no-repeat;
  background-size: cover;
}
.java_warp {
  width: 100%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 100px;
  padding-bottom: 98px;
}
.java_one {
  width: 100%;
  height: 641px;
}
.java_one_king {
  width: 100%;
  text-align: center;
  font-size: 0;
  padding-top: 92px;
}
.java_one_king span {
  font-family: MicrosoftYAHEI-Bold;
  font-size: 50px;
  color: #000;
  font-weight: 700;
}
.java_one_king span b {
  color: #1f8ceb;
}
.java_one_value {
  text-align: center;
  font-family: MicrosoftYaHei, SImSun;
  font-size: 22px;
  color: #999;
  margin-top: 26px;
}
.java_one_image {
  width: 100%;
  height: 251px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 98px;
}
.java_one_image li {
  cursor: pointer;
  width: 251px;
  height: 251px;
}
.java_use {
  width: 100%;
  text-align: center;
}
.java_use h2 {
  font-size: 51px;
  color: #000;
  font-weight: 700;
  font-family: MicrosoftYaHei-Bold;
}
.java_use h2 span {
  color: #2d92ed;
}
.java_use h2 b {
  color: #11b4bd;
}
.java_use h4 {
  font-family: MicrosoftYaHei;
  font-size: 22px;
  color: #666;
  margin-top: 25px;
}
.java_use_con {
  width: 100%;
  height: 508px;
  cursor: pointer;
  margin-top: 86px;
  margin-bottom: 78px;
}
.java_newtec {
  text-align: center;
  width: 100%;
  overflow: hidden;
  margin-bottom: 126px;
}
.newtec_tital {
  text-align: center;
  width: 100%;
}
.newtec_tital h2 {
  font-size: 50px;
  color: #000;
  font-weight: 700;
  font-family: MicrosoftYaHei-Bold;
}
.newtec_tital h4 {
  font-family: MicrosoftYaHei;
  font-size: 24px;
  color: #666;
  margin-top: 24px;
}
.newtec_con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-between;
  align-content: space-between;
}
.newtec_con .items {
  width: 16%;
  padding: 10px 5px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}
.newtec_con .items p {
  position: absolute;
  color: #fff;
  left: 0;
  bottom: 18%;
  width: 100%;
  text-align: center;
}
.newtec_con .items p span {
  font-size: 18px;
  color: #fff;
  text-decoration: underline;
}
.java_field {
  width: 100%;
  margin-bottom: 150px;
}
.field_tital {
  width: 100%;
  text-align: center;
}
.field_tital h2 {
  color: #000;
  font-size: 50px;
  font-weight: 700;
  font-family: MicrosoftYaHei-Bold;
}
.field_tital h2 span {
  color: #2d91ec;
}
.field_tital h4 {
  font-size: 21px;
  color: #666;
  margin-top: 20px;
}
.field_con {
  width: 1200px;
  height: 710px;
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.field_con_img {
  cursor: pointer;
  width: 500px;
  height: 338px;
}
.java_data {
  width: 100%;
}
.java_data_tatal {
  width: 100%;
  text-align: center;
}
.java_data_tatal h2 {
  font-size: 50px;
  font-family: MicrosoftYaHei-Bold;
  color: #000;
}
.java_data_tatal h2 span {
  color: #2d92ec;
}
.java_data_tatal h2 b {
  color: #11b4bd;
}
.java_data_tatal h4 {
  font-size: 22px;
  color: #666;
  font-family: MicrosoftYaHei;
  margin-top: 20px;
}
.java_data_con {
  width: 100%;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.java_data_bom {
  margin-left: 116px;
  width: 1043px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 78px;
  margin-bottom: 152px;
}
.java_data_bom span {
  font-family: MicrosoftYaHei-Bold;
  font-size: 24px;
  font-weight: 600;
  color: #000;
}
.java_data_bom b {
  font-size: 28px;
  color: #de1e1e;
}
.java_teacher {
  width: 100%;
}
.java_teacher_tital {
  width: 100%;
  text-align: center;
}
.java_teacher_tital h2 {
  font-family: MicrosoftYaHei-Bold;
  font-size: 48px;
  font-weight: 700;
  color: #000;
  height: 48px;
  line-height: 48px;
}
.java_teacher_tital h2 span {
  color: #39f;
}
.java_teacher_tital h2 b {
  color: #00ccc0;
}
.java_teacher_tital h4 {
  font-size: 22px;
  color: #666;
  font-family: MicrosoftYaHei;
  margin-top: 20px;
  margin-bottom: 82px;
}
.contanier {
  width: 100%;
}
.contanier ul {
  width: 1040px;
  height: 33px;
  margin: 0 auto;
  border-bottom: 1px solid red;
}
.contanier ul li {
  font-family: SimSun;
  font-weight: 600;
  padding: 0 17px;
  height: 26px;
  float: left;
  margin-left: 48px;
  font-size: 16px;
  color: #333;
  text-align: center;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.contanier ul .active {
  height: 26px;
  line-height: 26px;
  background: #0cf;
  position: relative;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-radius: 15px;
}
.contanier ul li .line {
  width: 100%;
  height: 7px;
  background: #0cf;
  position: absolute;
  left: 0;
  bottom: -14px;
}
.contanier ul li .line b {
  content: "";
  border: 5px solid #0cf;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.con_wrap {
  width: 1200px;
  height: 350px;
  margin-bottom: 86px;
}
.con {
  width: 100%;
  height: 100%;
  position: relative;
  .swiper {
    width: 1040px !important;
    margin: 0 auto;
    .swiper-slide {
      width: 250px !important;
      height: 350px !important;
      /* margin-left: 15px; */
      img {
        width: 250px;
        height: 350px;
      }
    }
  }
}
.jianjie {
  width: 250px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  bottom: 0;
}
.jianjie .top {
  width: 208px;
  height: 60px;
  color: #fff;
  margin: 0 auto;
}
.jianjie .top .top_t {
  margin-top: 16px;
  margin-bottom: 9px;
}
.jianjie .top .top_t .name {
  font-size: 20px;
}
.jianjie .top .top_t .age {
  font-size: 12px;
  padding-left: 19px;
}
.jianjie .top .top_b {
  font-size: 20px;
}
.jianjie p {
  width: 208px;
  height: 0;
  margin: 0 auto;
  border-top: 0 solid #fff;
  font-size: 12px;
  color: #fff;
  font-family: SimSun;
  text-indent: 2em;
  letter-spacing: 1px;
  line-height: 15px;
  box-sizing: border-box;
}
.jianjie:hover {
  animation: scaleDraw 1s linear;
  height: 280px;
}
@keyframes scaleDraw {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    height: 76px; /*开始为原始大小*/
  }
  100% {
    height: 280px;
  }
}
</style>